<template>
  <div class="news-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">{{ newsData.title || '文章详情' }}</h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/portal/news' }">系统动态</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <div class="news-detail-content">
        <!-- 文章主体 -->
        <div class="article-main">
          <!-- 文章头部信息 -->
          <div class="article-header">
            <h1 class="article-title">{{ newsData.title }}</h1>
            <div class="article-meta">
              <span class="meta-item">
                <i class="el-icon-date"></i>
                {{ newsData.date }}
              </span>
              <span class="meta-item">
                <i class="el-icon-folder"></i>
                {{ newsData.category }}
              </span>
              <span class="meta-item">
                <i class="el-icon-view"></i>
                {{ newsData.views }} 次浏览
              </span>
            </div>
            <div class="article-tags" v-if="newsData.tags && newsData.tags.length">
              <el-tag v-for="(tag, index) in newsData.tags" :key="index" size="small" effect="plain">
                {{ tag }}
              </el-tag>
            </div>
          </div>
          
          <!-- 文章内容 -->
          <div class="article-content" v-if="newsData.content">
            <div v-html="newsData.content"></div>
          </div>
          
          <!-- 文章底部 -->
          <div class="article-footer">
            <div class="article-actions">
              <el-button type="primary" plain size="small" @click="handlePrint">
                <i class="el-icon-printer"></i> 打印文章
              </el-button>
              <el-button type="primary" plain size="small" @click="handleShare">
                <i class="el-icon-share"></i> 分享
              </el-button>
            </div>
            
            <div class="article-nav">
              <div class="nav-prev" v-if="newsData.prevId">
                <span class="nav-label">上一篇：</span>
                <router-link :to="`/portal/news/${newsData.prevId}`">{{ newsData.prevTitle }}</router-link>
              </div>
              <div class="nav-next" v-if="newsData.nextId">
                <span class="nav-label">下一篇：</span>
                <router-link :to="`/portal/news/${newsData.nextId}`">{{ newsData.nextTitle }}</router-link>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="article-sidebar">
          <!-- 相关文章 -->
          <div class="sidebar-block">
            <h3 class="sidebar-title">相关文章</h3>
            <ul class="related-list">
              <li v-for="(article, index) in relatedArticles" :key="index">
                <router-link :to="`/portal/news/${article.id}`">{{ article.title }}</router-link>
              </li>
            </ul>
          </div>
          
          <!-- 热门文章 -->
          <div class="sidebar-block">
            <h3 class="sidebar-title">热门文章</h3>
            <ul class="hot-list">
              <li v-for="(article, index) in hotArticles" :key="index">
                <span class="hot-rank" :class="{'top-rank': index < 3}">{{ index + 1 }}</span>
                <router-link :to="`/portal/news/${article.id}`">{{ article.title }}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const newsId = route.params.id

// 文章详情数据
const newsData = ref({
  id: 1,
  title: '我系统成功开展首例人工智能辅助微创手术',
  category: '系统新闻',
  date: '2023-05-15',
  views: 1245,
  tags: ['人工智能', '微创手术', '技术创新'],
  content: `
    <p class="article-summary">5月12日，我系统胸外科团队在人工智能系统辅助下，成功为一名65岁肺癌患者实施了微创手术。这是我系统首次将AI技术应用于胸外科手术中，标志着我系统在智能化医疗领域迈出了重要一步。</p>
    
    <div class="article-image-container">
      <img src="https://via.placeholder.com/800x400" alt="手术现场" class="article-image">
      <p class="image-caption">手术团队正在进行AI辅助微创手术</p>
    </div>
    
    <h2>人工智能辅助技术的创新应用</h2>
    
    <p>本次手术中使用的人工智能辅助系统是我系统与某知名科技公司联合研发的最新成果。该系统通过高精度的实时图像分析和智能导航功能，能够帮助医生更精确地识别病变组织和重要血管神经结构，大大提高了手术的安全性和精准度。</p>
    
    <p>胸外科张主任介绍："传统的胸腔镜手术虽然已经是微创手术，但医生仍然需要依靠经验判断组织结构。引入AI辅助系统后，我们可以获得更清晰的组织边界和血管走向信息，手术精度得到显著提升，也更加安全。"</p>
    
    <h2>患者恢复情况良好</h2>
    
    <p>接受手术的王先生是一位65岁的退休教师，在常规体检中被发现右肺有一个2.5厘米的结节，经活检确诊为早期肺腺癌。考虑到病灶位置较深且邻近重要血管，常规手术风险较高。</p>
    
    <p>"使用AI辅助系统后，我们能够精确定位肿瘤位置，成功完成了右肺上叶切除术和淋巴结清扫，整个手术过程非常顺利，出血量仅为30ml。"张主任表示。</p>
    
    <p>术后第三天，王先生已经可以下床活动，精神状态良好。他表示："没想到这么大的手术，恢复得这么快，我很庆幸能够赶上这样的好技术。"</p>
    
    <h2>系统智能化医疗的战略布局</h2>
    
    <p>我系统负责人李教授表示，本次AI辅助微创手术的成功开展，是系统推进智能化医疗战略的重要里程碑。下一步，系统将继续深化人工智能技术在多学科领域的应用，计划在今年内将AI辅助系统推广到神经外科、心脏外科等多个外科领域。</p>
    
    <p>"智能化医疗是未来的发展方向，我们系统将不断引进和开发新技术，为患者提供更精准、更安全、更高效的诊疗服务。"李负责人说。</p>
    
    <p>据悉，我系统已经成立了"智能医疗中心"，专门负责人工智能技术在医疗领域的研发和应用，并计划在未来三年内投入5000万元用于智能医疗设备的购置和技术研发。</p>
  `,
  prevId: null,
  prevTitle: '',
  nextId: 2,
  nextTitle: '关于2023年端午节期间门诊安排的通知'
})

// 相关文章
const relatedArticles = ref([
  { id: 5, title: '我系统荣获"2023年度医疗服务质量示范单位"称号' },
  { id: 7, title: '我系统与哈佛医学院签署学术合作协议' },
  { id: 11, title: '我系统成功举办第五届国际肿瘤治疗新技术研讨会' },
  { id: 3, title: '央视报道：我系统在神经修复领域取得重大突破' }
])

// 热门文章
const hotArticles = ref([
  { id: 4, title: '夏季来临，如何预防中暑？' },
  { id: 10, title: '糖尿病饮食指南：科学控糖从餐桌开始' },
  { id: 3, title: '央视报道：我系统在神经修复领域取得重大突破' },
  { id: 6, title: '正确认识高血压：症状、风险与管理' },
  { id: 7, title: '我系统与哈佛医学院签署学术合作协议' }
])

// 模拟获取文章数据
const fetchNewsData = (id) => {
  // 这里应该是从API获取数据
  // 暂时使用静态数据
  console.log('获取文章ID:', id)
}

// 分享文章
const handleShare = () => {
  ElMessage.success('分享功能正在开发中')
}

// 打印文章
const handlePrint = () => {
  window.print()
}

onMounted(() => {
  fetchNewsData(newsId)
})
</script>

<style scoped>
.news-detail-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  background-color: white;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px;
}

.main-content {
  margin-bottom: 30px;
}

.news-detail-content {
  display: flex;
  gap: 30px;
}

.article-main {
  flex: 3;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.article-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.article-title {
  font-size: 28px;
  color: #333;
  margin: 0 0 15px;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #909399;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.meta-item i {
  margin-right: 5px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-content {
  color: #333;
  line-height: 1.8;
  font-size: 16px;
}

.article-content h2 {
  font-size: 22px;
  color: #333;
  margin: 30px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eee;
}

.article-content p {
  margin-bottom: 20px;
}

.article-summary {
  font-size: 18px;
  color: #606266;
  line-height: 1.6;
  padding: 15px;
  background-color: #f9f9f9;
  border-left: 4px solid #1989fa;
  margin-bottom: 30px;
}

.article-image-container {
  margin: 20px 0 30px;
  text-align: center;
}

.article-image {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-caption {
  color: #909399;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}

.article-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.article-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.article-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nav-prev, .nav-next {
  display: flex;
  align-items: center;
}

.nav-label {
  color: #909399;
  margin-right: 10px;
}

.sidebar-block {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.sidebar-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.sidebar-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 50px;
  height: 3px;
  background-color: #1989fa;
  border-radius: 3px;
}

.related-list, .hot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-list li, .hot-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}

.related-list li:last-child, .hot-list li:last-child {
  border-bottom: none;
}

.related-list a, .hot-list a {
  color: #606266;
  text-decoration: none;
  transition: color 0.3s;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.related-list a:hover, .hot-list a:hover {
  color: #1989fa;
}

.hot-list li {
  display: flex;
  align-items: center;
}

.hot-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}

.top-rank {
  background-color: #1989fa;
  color: white;
}

@media (max-width: 992px) {
  .news-detail-content {
    flex-direction: column;
  }
  
  .article-title {
    font-size: 24px;
  }
  
  .article-main {
    padding: 20px;
  }
}

@media print {
  .page-header,
  .article-sidebar,
  .article-actions,
  .article-nav {
    display: none;
  }
  
  .news-detail-content {
    display: block;
  }
  
  .article-main {
    box-shadow: none;
    padding: 0;
  }
  
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
</style> 